<template>
  <div class="message-order">
    <a-spin :spinning="loading">
      <a-list item-layout="vertical" :data-source="msgList">
        <div v-if="showLoadingMore" slot="loadMore" class="loadMore tc">
          <a-spin v-if="loadingMore" />
          <c-button v-else type="link" @click="onLoadMore">
            加载更多
          </c-button>
        </div>
        <a-list-item slot="renderItem" slot-scope="item">
          <p class="head flex flex-align-c">
            <!-- <span class="avatar" :class="setIcon(item.type)"> -->
            <c-icon
              :type="setIcon(item.type)"
              size="16"
              class="dindan"
            ></c-icon>
            <!-- </span> -->
            <span class="title">{{ item.title }}</span>
          </p>
          <div class="content">
            {{ item.message }}
          </div>
          <div class="foot flex-between flex-align-c">
            <span class="date">{{ $getTime(item.createDate) }}</span>
            <div class="handle">
              <span class="btn primary" @click="checkOrder(item)">查看</span>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-spin>
  </div>
</template>

<script>
import { getordermsg } from "@/api/message";
import { checkOrderDetail } from "@/util/common";

export default {
  data() {
    return {
      msgList: [], // 订单消息列表
      loading: true,
      loadingMore: false,
      pageNum: 1,
      total: undefined
    };
  },
  computed: {
    showLoadingMore() {
      return this.msgList.length !== this.total;
    },
    setIcon() {
      return type => {
        let icon;
        switch (type) {
          case 1:
            icon = "dingdan";
            break;
          default:
            icon = "dingdan";
            break;
        }
        return icon;
      };
    }
  },
  methods: {
    // 跳转订单详情
    checkOrder(row) {
      checkOrderDetail(row);
    },
    // 刷新消息
    reload() {
      this.loading = true;
      this.pageNum = 1;
      this.getOrderMsgList("reload");
    },
    getOrderMsgList(type) {
      getordermsg({
        pageNum: this.pageNum,
        pageSize: 10
      })
        .then(res => {
          if (res) {
            if (type === "reload") this.msgList = []; // 刷新消息需要先清空消息列表
            this.msgList = res.pageData
              ? this.msgList.concat(res.pageData)
              : [];
            this.total = res.total;
          }
        })
        .finally(() => {
          if (this.loading) {
            this.loading = false;
            this.$emit("reloadFinish", "order");
          } else {
            this.loadingMore = false;
          }
        });
    },
    //   加载更多
    onLoadMore() {
      this.loadingMore = true;
      this.pageNum++;
      this.getOrderMsgList();
    }
  },
  created() {
    this.getOrderMsgList();
  }
};
</script>

<style lang="scss" scoped>
.dindan {
  color: rgb(51, 145, 229);
}
</style>
